<template>
<!--    分页组件-->
    <div class="pagingtion">
        <span class="item prev" v-if="showSideBtn && showPrevBtn" @click="onBtnPageClick('prev')"><</span>

        <span class="item number" @click="onPageClick(1)" :class="{activate: currentPage === 1}">1</span>

        <span class="item space" v-if="showPrevSpace">...</span>

        <span class="item number"  @click="onPageClick(item)" :class="{activate: currentPage === item}" v-for="(item, index) in pagers">{{ item }}</span>

        <span class="item space" v-if="showNextSpace">...</span>

        <span class="item number"  @click="onPageClick(pagerNum)" :class="{activate: currentPage === pagerNum}" v-if="pagerNum !== 1">{{ pagerNum }}</span>

        <span class="item next" v-if="showSideBtn && showNextBtn" @click="onBtnPageClick('next')">></span>
    </div>
</template>

<script>
    export default {
        name: "Pagingtion",
        props: {
            currentPage: { // 当前页数 (必传)
                type: Number,
                default: 1,
            },
            pageSize: { // 每页显示数量
                type: Number,
                default: 10,
            },
            pageNumber: { // 页码按钮数量 （只能为奇数）
                type: Number,
                default: 5,
            },
            total: { // 总数量 (必传)
                type: Number,
                default: 0,
            },
            showSideBtn: {
                type: Boolean,
                default: true,
            }
        },
        data () {
            return {
                showPrevSpace: false,
                showNextSpace: false,
                showPrevBtn: false,
                showNextBtn: false,
            }
        },
        computed: {
            pagerNum () { // 总页数
                let { total, pageSize } = this

                return Math.max(1, Math.ceil(total / pageSize))
            },
            pagers () {
                let { total, pageNumber, pageSize, currentPage, pagerNum } = this
                let halfPagerCount = (pageNumber - 1) / 2

                let showPrevSpace = false
                let showNextSpace = false
                let showPrevBtn = false
                let showNextBtn = false


                // 总页数 大于 显示的按钮数
                if (pagerNum > pageNumber) {
                    if (currentPage > pageNumber - halfPagerCount) {
                        showPrevSpace = true
                    }

                    if (currentPage < pagerNum - halfPagerCount) {
                        showNextSpace = true
                    }
                }

                let arr = []

                // 左边...未出现时
                if (!showPrevSpace && showNextSpace) {
                    for (let i=2; i<pageNumber; i++) {
                        arr.push(i)
                    }
                }
                // 右边...未出现时
                else if (showPrevSpace && !showNextSpace) {
                    // 右边开始数 = 总页数 - （显示按钮数 - 2）
                    let startPage = pagerNum - (pageNumber - 2)
                    for (let i=startPage; i<pagerNum; i++) {
                        arr.push(i)
                    }
                }
                // 左边... 与 右边... 同时出现
                else if (showPrevSpace && showNextSpace) {
                    // 计算偏移量
                    let offset = Math.floor((pageNumber - 2) / 2)
                    for (let i=currentPage-offset; i<currentPage+offset+1; i++) {
                        arr.push(i)
                    }
                }
                else {
                    for (let i=2; i<pagerNum; i++) {
                        arr.push(i)
                    }
                }

                this.showPrevSpace = showPrevSpace
                this.showNextSpace = showNextSpace
                this.showPrevBtn = currentPage === 1 ? false : true
                this.showNextBtn = currentPage === pagerNum ? false : true

                return arr
            },
        },
        methods: {
            onBtnPageClick (type) {
                switch (type) {
                    case 'prev': // 点击上一个按钮
                        this.$emit('update:currentPage', this.currentPage - 1)
                        this.$emit('changePage', this.currentPage - 1)
                        break
                    case 'next':// 点击下一个按钮
                        this.$emit('update:currentPage', this.currentPage + 1)
                        this.$emit('changePage', this.currentPage + 1)
                        break
                }
            },

            onPageClick (page) {
                if (page === this.currentPage) return
                this.$emit('update:currentPage', page)
                this.$emit('changePage', page)
            },
        },
    }
</script>

<style scoped>
    .pagingtion {
        border-top: 1px solid #eee;
        width: 100%;
    }

    .pagingtion .item:not(.space) {
        display: inline-block;
        margin: -1px 10px 0;
        padding: 0 10px;
        line-height: 26px;
        cursor: pointer;
        border-top: 1px solid transparent;
    }

    .pagingtion .item:hover:not(.space) {
        border-top-color: #000;
    }

    .pagingtion .activate {
        border-top-color: #000;
        background-color: #ccc;
        color: #fff;
        cursor: default;
    }
</style>
